<template>
  <div>
    <!-- 歌单详情页 -->
    <!-- <pre>
      {{ privileges }}
    </pre> -->

    <ItemMusicTop :playlist="state.playlist" :creator="state.creator" />
    <itemMusicFloor :itemList="state.itemList" />
  </div>
</template>

<script>
import ItemMusicTop from "@/components/item/ItemMusicTop.vue";
import itemMusicFloor from "@/components/item/itemMusicFloor.vue";
import { getMusicDetail, getMusicAll } from "@/request/api/item";
import { useRoute } from "vue-router";
import { onMounted, reactive } from "vue";
export default {
  // vue2写法：
  // data() {
  //   return {
  //     privileges:[],
  //   }
  // },
  // computed: {
  //   id() {
  //     return this.$route.query.id
  //   }
  // },
  // methods: {
  //   async getdata() {
  //     try {
  //       const res = await getMusicDetail(this.id)
  //     console.log(res.data.privileges)
  //     this.privileges = res.data.privileges
  //     } catch (error) {
  //       console.log(error)
  //     }
  //   }
  // },
  // mounted() {
  //   this.getdata()
  // }

  // vue3写法：
  setup() {
    const state = reactive({
      //歌单的详情页的数据
      playlist: {},
      creator: {},
      itemList: [],
    })

    onMounted(async () => {
      let id = useRoute().query.id
      // 获取歌单详情页
      let res = await getMusicDetail(id)
      console.log(res)
      state.playlist = res.data.playlist
      state.creator = res.data.playlist.creator

      // 获取歌单所有歌曲
      let result = await getMusicAll(id)
      console.log(result)
      state.itemList = result.data.songs
    })

    return { state }
  },

  components: { ItemMusicTop, itemMusicFloor }
}
</script>

<style>
</style>